<template>
  <div class="main">
    <!-- 搜索部分 -->
    <el-form>
      <el-form-item>
        <el-input v-model.trim="inputValue" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-button type="primary" @click="handleClick">查询</el-button>
    </el-form>
    <!-- 展示部分，包含数据内容，编辑删除操作 -->
    <Table
      :list="courseList"
      :editClick="editClick"
      :deleteHandle="deleteHandle"
    ></Table>
    <!-- 分页部分 -->
    <Pagination :currentChange="currentChange"></Pagination>
    <!-- 编辑框部分，当点击编辑后显示 -->
    <EditPop
      :popShow="popShow"
      v-if="popShow"
      :message="courseItemState.message"
      :confirmClick="confirmClick"
    ></EditPop>
  </div>
</template>

<script setup>
import { computed, onMounted, reactive, ref } from "vue";
import Table from "./Table.vue";
import EditPop from "./EditPop.vue";
import Pagination from "./Pagination.vue";
import { ElMessage } from "element-plus";
import { getCourse, changeCourse, deleteCourse } from "../api/index";
import emitter from "../utils/eventBus";
/**
 * 初始化的数据
 */
const data = reactive({
  list: [],
  page: 1, // 默认展示第一页数据
  total: 15, // 课程总数，默认为15
  sideCategory: "front", // 课程的分类，默认前端
});

/**
 * 课程列表数据获取和课程类名切换逻辑接口
 */
const getCourseData = async (query) => {
  const category = query?.category || data.sideCategory; // 请求默认选择front为类别
  const page = query?.page || 1; // 请求页默认为1页
  const size = query?.size || 5; // 请求默认一页显示5条数据
  const res = await getCourse({ category, page, size });

  // 筛选符合分类的课程
  data.list = res?.list.filter((item) => item.category === category);
  data.total = res?.total;
  // console.log(data.list)
};

onMounted(() => {
  // 刚进入网页，要获取一次课程
  getCourseData();
  //监听课程类目tab切换
  emitter.on("course", (val) => {
    data.sideCategory = val;
    data.page = 1;
    getCourseData({ category: val, page: 1 });
  });
});

/**
 * 分页的逻辑
 */
const currentChange = (val) => {
  if (val === "pre") {
    if (data.page > 1) {
      data.page--;
    } else {
      ElMessage({
        message: "已经示第一页了！！！",
        type: "warning",
        showClose: true,
      });
    }
  }
  if (val === "next") {
    console.log(data.total);
    if (data.page < Math.ceil(data.total / 5)) {
      data.page++;
    } else {
      ElMessage({
        message: "已经是最后一页了！！！",
        type: "warning",
        showClose: true,
      });
    }
  }
  // 请求课程的接口
  getCourseData({ category: data.sideCategory, page: data.page });
};

/**
 * 搜索框的逻辑
 */
const inputValue = ref("");
// 搜索的逻辑
const courseList = computed(() => {
  return data.list?.filter((item) => {
    return item.title.indexOf(inputValue.value) >= 0;
  });
});
// 搜索的按钮
const handleClick = () => {
  if (inputValue.value) {
    ElMessage({
      message: "查询成功",
      type: "success",
    });
  } else {
    ElMessage({
      message: "请输入搜索内容",
      type: "error",
    });
  }
};

/**
 * 课程编辑的逻辑
 */
// 课程修改接口调用
const changeCourseData = async (query) => {
  const { title, price, id } = query;
  const res = await changeCourse({ title, price, id });
  if (res?.message) {
    ElMessage({
      message: res.message,
      type: "success",
    });
  }
};
// 编辑的数据
const courseItemState = reactive({
  message: {},
});
// 控制编辑弹窗的展示变量
const popShow = ref(false);
// 控制编辑弹窗的展示方法
const isShowPop = (show) => {
  popShow.value = show;
};
// 编辑的按钮
const editClick = (val) => {
  isShowPop(true);
  courseItemState.message = val;
};
// 取消和确认按钮的逻辑
const confirmClick = (val) => {
  if (val === "cancel") {
    // 取消编辑逻辑
    isShowPop(false);
  } else if (
    // 提交修改逻辑
    val.title !== courseItemState.message.title ||
    val.price !== courseItemState.message.price
  ) {
    data.list.map((item) => {
      // 更改对应课程的title或者price
      if (item.id === val.id) {
        item.title = val.title;
        item.price = val.price;
      }
    });
    isShowPop(false); // 关闭弹窗
    // 修改接口的调用
    changeCourseData({ title: val.title, price: val.price, id: val.id });
  } else {
    ElMessage({
      showClose: true,
      message: "未发现更改内容",
      type: "warning",
    });
  }
};

/**
 * 课程删除的逻辑
 */
// 删除的接口
const deleteCourseData = async (query) => {
  const { id } = query;
  const res = await deleteCourse({ id });
  if (res?.message) {
    ElMessage({
      message: res.message,
      type: "success",
    });
  }
  // 当前页的数据清零时，重置到第一页
  if (data.list.length === 0 && data.page > 1) {
    getCourseData({ category: data.sideCategory, page: 1 });
  }
};

const deleteHandle = (val) => {
  if (val) {
    data.list = data.list.filter((item) => {
      return item.id !== val;
    });
    // 删除接口的调用
    deleteCourseData({ id: val });
  }
};
</script>

<style lang='less' scoped>
.el-form {
  display: flex;
}

.main {
  background-color: #fff;
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;

  .input-with-select {
    width: 400px;
    margin-bottom: 40px;
  }
}

:deep(.el-table__header-wrapper) {
  position: fixed;
  z-index: 20;
}

:deep(.el-table__inner-wrapper) {
  overflow: hidden;
}

:deep(.el-table__body-wrapper) {
  margin-top: 40px;
}

:deep(.el-input__inner) {
  width: 300px;
  margin-right: 10px;
}

:deep(.warning-row) {
  --el-table-tr-bg-color: var(--el-color-warning-light-9) !important;
  height: 140px !important;
}

.table {
  height: 80vh;
  width: 85vw;
  overflow: hidden;
  overflow-y: scroll;
}

.table::-webkit-scrollbar {
  display: none;
}
</style>